import React, { useEffect, useState } from 'react'
import Header from '../../components/Header/Header'
import Tablist from '../../components/Tablist/Tablist'
import { Card, Empty } from 'antd-mobile'
import './Coupon.less'
import { reqCoupon } from '../../request/api'
import { fliterTime } from '../../filters'

const Coupon = () => {
  // 1.初始化状态
  const [arr, setArr] = useState(['未使用', '已使用', '已失效']);
  const [coupon, setCoupon] = useState([]);
  const [n, setN] = useState(0);
  // 2.一进页面发请求
  useEffect(() => {
    reqCoupon().then(res => {
      setCoupon(res.data.list);
    })
  }, []);
  return (
    <div className='coupon'>
      <Header title='优惠券' back></Header>
      <div className='nav'>
        {arr.map((item, index) => {
          return <div key={index}><span className={index == n ? 'active' : ''} onClick={() => setN(index)}>{item}</span></div>
        })}
      </div>
      {coupon.length > 0 ?
        <div>
          {coupon[n].content.map((i, ind) => {
            return <Card key={i.id} title={<div className='content' >
              <div className='money'>
                ￥<i>{i.money}</i>
                <p>满{i.limit_money}元可用</p>
              </div>
              <div className='desc'>
                <h4>{i.title}</h4>
                <p>{fliterTime(i.begintime)} 至 {fliterTime(i.endtime)}</p>
              </div>
            </div>} >
              <p className='text'>使用规则：{i.description}</p>
            </Card>
          })}</div> : <Empty description='暂无数据' />}

    </div>
  )
}
export default Coupon;
